 <style>
.ui-autocomplete-loading {
background: white url('<?php echo base_url()?>resources/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script type="text/javascript">
 function split( val ) {
		return val.split( /,\s*/ );
	}
	function extractLast( term ) {
		return split( term ).pop();
	}
 $(function() {
	
	$("input[name='submit']").click(function(){
		var stt = $("#stt").val();
		if(!$("#Cust_ID").val()) {
			alert("Vui long dien thong tin khach hang");
			$("#khachhang").focus();
			return false;}
		for(var i = 0; i< parseInt(stt);i++){
			if(!$("#EE_Name"+stt).val()) {
			alert("Vui long dien thong tin nguoi tip nhan");
			$("#EE_Name"+stt).focus();
			return false;}
		}
		return true;
	});
	/*
	$("#muaphieu1").click(function(){
		var ischeck = $(this).is(':checked');
		if(ischeck) {
			$(".phieu1").show("slow");
			//$("#themdichvu").hide("slow");		
			$("select[name='Phieu_ID']").change();
		}
		else {
			$(".phieu1").hide("slow");
			//$("#themdichvu").show("slow");		
			$("#Serv_ID1").attr("disabled",false);
		}
	});
	$("select[name='Phieu_ID1']").change(function(){
		var phieuid = $("select[name='Phieu_ID1'] option:selected").val();
		if(phieuid){//ton tai phieu
			$(".themphieu1").hide("slow");
			$("#Serv_ID1").attr("disabled",true);
		}else{
			$(".themphieu").show("slow");
			$("#Serv_ID1").attr("disabled",false);
		}
	});
	*/
	$( "#khachhang" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>customer/search",
		focus: function() {
          // prevent value inserted on focus
          //return false;
        },
		minLength: 1,
		select: function( event, ui ) {
			 $("#Cust_ID").val(ui.item.id);
			 var ischeck = $("#muaphieu1").is(':checked');
			 //if(ischeck){				
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/getPhieuKH',
				data: {Cust_ID: ui.item.id
					},
				success: function(data){
						 var R = eval('(' + data + ')'); 
						 $("select[name='Phieu_ID1']").html(R.html);
				},
				statusCode:{
					404: function(){
						
					}
				}
			});
			 //}
		}
	});
	
	/*
	$( "#EE_Name" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>transaction/searchnv",
		focus: function() {
          // prevent value inserted on focus
          return false;
        },
		minLength: 1,
		select: function( event, ui ) {
		var terms = split($("#EE_ID").val());
		var display = split($("#EE_Name").val());
		//alert(display);
          // remove the current input
          terms.pop();
		  display.pop();
          // add the selected item
          terms.push( ui.item.id );
		  display.push(ui.item.value);
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          $("#EE_ID").val(terms.join( ", " ));
		  display.push("");
		  $("#EE_Name").val(display.join(", "));
          return false;
			// $("#Cust_ID").val(ui.item.id);
		}
	});
	*/
	
	$("#Discount_Percent").change(function(){
		if(isNaN($(this).val())) {
			$(this).val("");
			alert("Giảm giá phải là số nguyên.");
			$("#Discount_Percent").focus();
		}else{
			var discount_percent = $(this).val();
			var price = $("#Price").val();
			$("#Money").val((100-parseInt(discount_percent))/100*parseInt(price));
		}
	});
	
	$("#add_new_customer").click(function(){
		if($("#customer_new").css("display") == "none") $("#customer_new").show("slow");
		else $("#customer_new").hide("slow");
	});
	$("#add_new_service").click(function(){
		if($("#service_new").css("display") == "none") $("#service_new").show("slow");
		else $("#service_new").hide("slow");
	});
	$("#btn_add_dv").click(function(){
		if(!$("#Serv_Name").val()) {alert("Vui lòng điền tên dich vu.");$("#Serv_Name").focus();}
		else{
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/add_new_service',
				data: {Serv_Name: $("#Serv_Name").val(),
					dm_id: $("select[name='dm_id']").val(),
					Time: $("#Time").val(),
					Price: $("#giadv").val(),
					Percent_Serv: $("#fantramdv").val(),
					TienTip: $("#tientipdv").val(),
					Name:  $("select[name='dm_id'] option:selected").text()
					},
				success: function(data){
						 var R = eval('(' + data + ')'); 
						$("#service_new").hide("slow");
						$('select[name="Serv_ID'+$("#stt").val()+'"]').append('<option value="'+R.Serv_ID+'" selected="selected">'+R.Name+'</option>');
						 $("#giam"+$("#stt").val()).val("0");
						$("#gia"+$("#stt").val()).val(R.Price);
						$("#thanhtien"+$("#stt").val()).val(R.Price);
						$("#tientip"+$("#stt").val()).val(R.TienTip);
						//console.log(R);
						tinhlaiGia();
				},
				statusCode:{
					404: function(){
						
					}
				}
			});
		}
	});
	//them dich vu
	$("#themdichvu").click(function(){
		var stt = $("#stt").val();
		stt =parseInt(stt) + 1;
		$("#stt").val(stt);
		$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/getComboBoxService',
				data: {stt: stt,
					Cust_ID:$("#Cust_ID").val()
					},
				success: function(data){
						$("#themdichvu").before(data);
				},
				statusCode:{
					404: function(){
						
					}
				}
		});
	});
	//them khach hang
	$("#btn_add").click(function(){
		// if(!$("#F_Name").val()){alert("Vui lòng điền họ.");$("#F_Name").focus();}
		// else 
		if(!$("#L_Name").val()) {alert("Vui lòng điền tên.");$("#L_Name").focus();}
		else{
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/add_new_customer',
				data: {F_Name: $("#F_Name").val(),
					L_Name: $("#L_Name").val(),
					DOB: $("#DOB").val(),
					Phone_NO: $("#Phone_NO").val()
					},
				success: function(data){
						 var R = eval('(' + data + ')');   
						$("#Cust_ID").val(R.Cust_ID);
						$("#khachhang").val(R.F_Name + " " +R.L_Name);
						$("#customer_new").hide("slow");
				},
				statusCode:{
					404: function(){
						
					}
				}
			});
		}
	});
}); 
function service_change(name){

		var serv_id = $("select[name='"+name+"']").val();
		$.ajax({
			type: 'post',
			url: '<?php echo base_url()?>transaction/getPromotion',
			data: {serv_id: serv_id},
			success: function(data){
				var R = eval('(' + data + ')'); 
				var ischeck = $("#muaphieu"+name.replace("Serv_ID","")).is(':checked');
				//console.log(name.replace("Serv_ID",""));
				$("#tientip"+name.replace("Serv_ID","")).val(R.TienTip);
				$("#Percent_Serv"+name.replace("Serv_ID","")).val(R.Percent_Serv);
				if(!ischeck) {
					$("#giam"+name.replace("Serv_ID","")).val(R.Discount_Percent);
					$("#gia"+name.replace("Serv_ID","")).val(R.Money);
					$("#thanhtien"+name.replace("Serv_ID","")).val(R.Price);					
				}else{
					$("#giam"+name.replace("Serv_ID","")).val("0");
					$("#gia"+name.replace("Serv_ID","")).val(R.Money * parseInt($("select[name='sosuat"+name.replace("Serv_ID","")+"'] option:selected").val()));
					$("#thanhtien"+name.replace("Serv_ID","")).val(R.Price * parseInt($("select[name='sosuat"+name.replace("Serv_ID","")+"'] option:selected").val()));
				}
				//alert(ischeck);
				//set price
				tinhlaiGia();				
				//set dich vu
				if($("#Serv_ID").val())
					$("#Serv_ID").val($("#Serv_ID").val()+";"+R.Serv_ID);
				else 
					$("#Serv_ID").val(R.Serv_ID);
			},
			statusCode:{
				404: function(){
					
				}
			}
		});
}

function tinhlaiGia(){
	 //set price
	var stt = parseInt($("#stt").val());
	var Discount_Percent = 0;
	var Money = 0;
	var Price = 0;
	var i =1;
	for(i=1; i<=stt;i++){
		Discount_Percent += parseInt($("#giam"+i).val());
		Money += parseInt($("#gia"+i).val());
		Price += parseInt($("#thanhtien"+i).val());
	}
	$("#Money").val(Price);
	$("#Discount_Percent").val(Discount_Percent);
	$("#Price").val(Money);	
}
 </script>
<div class="container">
<?php  echo form_open(current_url()); ?>
		<h1>Thanh toán </h1>
				<div id = "top_reserve">
			<div id = "opt_box">
			</div> <!-- end opt_box -->
			<div id = "add_new">
			  <?php echo form_submit( 'submit', 'Hoàn tất'); ?>
			</div> <!-- end add_new -->
		</div> <!-- end top_reserve -->

<div style="width:500px;margin:0 auto;">
<?php echo $custom_error; ?>
<?php if(empty($customer)){?>
 <span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="khachhang">Tên khách hàng<span class="required"><font color="red">*</font></span></label>                                
               <input id="khachhang" name="khachhang" value="<?php echo $khachhang;?>" />
			   <div id="add_new_customer" style="cursor:pointer;"> Tạo mới khách hàng</div>
			   <span id="customer_new" style="display:none;clear:both; float:left; padding:5px;border:dotted;">
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="F_Name">Họ</label>  <input id="F_Name" name="F_Name" value="" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="L_Name">Tên</label>  <input id="L_Name" name="L_Name" value="" /></p>
				<p><label style="float: left; text-align: right; margin-right: 21px; width: 135px;" for="DOB">Ngày sinh</label>  <input id="DOB" name="DOB" value="" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Phone_NO">Sđt</label>  <input id="Phone_NO" name="Phone_NO" value="" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Phone_NO">&nbsp;&nbsp;&nbsp;</label> <input type="button" id="btn_add" name="btn_add" value="Thêm" /></p>
			   </span>              
                </p></span>
	<?php } else{ ?>
		<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="EE_ID">Ten khach hang:</label>          
				 <?php echo $customer->F_Name." ".$customer->L_Name;?>
                </p></span>
	<?php } ?>
				<!--<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="EE_ID">Nhân viên típ</label>          
				 <input id="EE_Name" type="text" name="EE_Name" value="<?php echo $ee_name;?>" />
				 <input id="EE_ID" type="hidden" name="EE_ID" value="<?php echo $ee_id;?>" />
                </p></span>-->
<span style=" clear:both; float:left; padding:5px;">
                <p>    
                <input id="Cust_ID" type="hidden" name="Cust_ID" value="<?php echo $Cust_ID; ?>"  />
                </p></span>
				<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Create_Dt">Ngày</label>                                
                <input id="Create_Dt" type="text" name="Create_Dt" value="<?php echo set_value('Create_Dt'); ?>"  />
                <?php echo form_error('Create_Dt','<div>','</div>'); ?>
                </p></span>				
				<?php  echo $combobox_cats;?>

		<div style="cursor:pointer;float:left;margin-left:55px;clear:both;" id="themdichvu">Thêm dịch vụ</div>
		<!--<div id="add_new_service" style="cursor:pointer;float:left;margin-left:55px;clear:both;;"> Tạo mới dịch vụ</div>-->
			   <span id="service_new" style="display:none;clear:both; float:left; padding:5px;border:dotted;">
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="danhmuc">Danh mục</label>  <?php echo $combobox_dm;?></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="tendichvu">Tên dịch vụ</label>  <input id="Serv_Name" name="Serv_Name" value="" style="float:left;width:179px;"/></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Time">Thời gian</label>  <input id="Time" name="Time" value="" style="float:left" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Price">Gia'</label>  <input id="giadv" name="giadv" value="" style="float:left" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Price">%Dv</label>  <input id="fantramdv" name="fantramdv" value="" style="float:left" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Price">Tien tip</label>  <input id="tientipdv" name="tientipdv" value="" style="float:left" /></p>
				<p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Phone_NO">&nbsp;&nbsp;&nbsp;</label> <input type="button" id="btn_add_dv" style="float: left;" name="btn_add_dv" value="Thêm" /></p>
			   </span>
		<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Price">Tổng giá</label>                                
                <input id="Price" type="text" name="Price" value="<?php echo set_value('Price'); ?>"  />x1000
                <?php echo form_error('Price','<div>','</div>'); ?>
                </p></span>
<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Discount_Percent">Tổng giảm giá</label>                                
                <input id="Discount_Percent" type="text" name="Discount_Percent" value="<?php echo set_value('Discount_Percent'); ?>"  />%
                <input id="Promo_ID" type="hidden" name="Promo_ID" value="<?php echo set_value('Promo_ID'); ?>"  />
                <input id="Serv_ID" type="hidden" name="Serv_ID" value="<?php echo set_value('Serv_ID'); ?>"  />
                <input id="stt" type="hidden" name="stt" value="<?php echo $stt; ?>"  />
                <?php echo form_error('Discount_Percent','<div>','</div>'); ?>
                </p></span>
<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Money">Tổng thành tiền</label>                                
                <input id="Money" type="text" name="Money" value="<?php echo set_value('Money'); ?>"  />x1000
                <?php echo form_error('Money','<div>','</div>'); ?>
                </p></span>
				<!--
				<span style=" clear:both; float:left; padding:5px;">
                <p><label style="float: left; text-align: right; margin-right: 5px; width: 135px;" for="Bonus">Tiền típ ngày hôm nay</label>                                
                <input id="Bonus" type="text" name="Bonus" value="<?php echo $Bonus; ?>"  />x1000
                <?php echo form_error('Bonus','<div>','</div>'); ?>
                </p></span>-->
				
</div>

<?php echo form_close(); ?>
</div>
